<template>
  <li :class="[prefixCls + '-wrap']"
      v-show="!hidden">
    <div v-for="(item,index) in currentGroupData"
         :key="item.name+index">
      <h3 :class="[prefixCls + '-title']">{{item.name}}</h3>
      <div :class="[prefixCls]"
           ref="options">
        <slot :index="index"
              :item="item.children">
          <ul>
          <atyOption v-for="(itemChild,indexChild) in item.children"
                     :key="itemChild.code"
                     :value="itemChild.code"
                     :disabled="itemChild.disabled"
                     :showTitle="showTitle"
                     :label="itemChild.name"
                     :simpleSpell="itemChild.simpleSpell"
                     :fullSpell="itemChild.fullSpell"
                     :valid="itemChild.valid"
                     :showInvalid="showInvalid"
                     :htmlHighLight="htmlHighLight" />
          </ul>
        </slot>
      </div>
    </div>
  </li>
</template>
<script type="text/ecmascript-6"  src="./index.js"></script>
